<template>
	<view>
		<uni-nav-bar @clickLeft="goback" left-icon="back" fixed title="用户评价" status-bar="true"></uni-nav-bar>
		<view class="top">
			<view class="" style="margin-top: 15rpx;">
				全部({{product.replyCount}})
			</view>
			<view class="textrig">
				<view class="">{{product.rating}}</view>
				<uni-rate class="x" readonly="true" :value="product.rating" size='16' activeColor="#000"></uni-rate>
			</view>
		</view>
		<view class="block_1">
			<view class="tipflex">
				<view class="ites" v-for="(i,idx) in tagList" :key="idx">
					{{idx}} ({{i}})
				</view>
			</view>
			<view class="change">
				<view class="change_l">
					<view class="" @click="change(0)" :style="{color:params.order == ''?'':'#D1CDCD'}">
						推荐
					</view>
					<view class="x"></view>
					<view class="" @click="change(1)"
					:style="{color:params.order == 1?'':'#D1CDCD'}">
						最新
					</view>
				</view>
				<view class="change_r">
					<image src="/static/icon/zs.png" mode=""></image>
					为您展示真实评价
				</view>
			</view>
		</view>

		<view class="plist">
			<view class="ite" v-for="(item,index) in commentList" :key="index" @click="pagePer(item)">
				<view class="items_user">
					<view class="user_flex">
						<image class="uimg" :src="item.userHead" mode="aspectFit"></image>
						<view class="uname">
							{{item.userName}}
						</view>
					</view>
					<view class="time">{{item.createTime}}</view>
				</view>
				<view class="star">
					<uni-rate readonly="true" :value="item.rating" size='19' activeColor="#000"></uni-rate>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="pimglist" v-if="item.img">
					<image @click.stop="$previewImage(item.img,ind)" v-for="(img,ind) in item.img" :key="ind" :src="img"
						mode="scaleToFill"></image>
				</view>
				<view class="shop">
					{{item.productName}}({{item.productCount}}份)
					<span>￥{{item.productPrice}}</span><span class="s2">￥{{item.productPriceOld}}</span>
				</view>
				<view class="imgflex">
					<view class="tipflexs">
						<view class="ites" v-for="(tag,ind) in item.tag" :key="ind">
							{{tag}}
						</view>
					</view>
					<view class="img_r">
						<view class="r">
							<span>{{item.replyCount}}</span>
							<uni-icons size="20" color='#D9D9D9' type="chat"></uni-icons>
						</view>
						<view class="r" @click.stop="handleDZ(item,index)">
							<span>{{item.likeCount}}</span>
							<uni-icons v-if="item.likeFlag" size="20" color='#000000' type="hand-up-filled"></uni-icons>
							<uni-icons v-else size="20" color='#D9D9D9' type="hand-up"></uni-icons>
						</view>
					</view>
				</view>
				<view class="dialog" v-if="item.replyList!=0">
					<view class="itemss" v-for="(reply,index) in item.replyList" :key="index">
						<view class="items_users">
							<view class="items_conts">
								<view class="user_flexs">
									<image class="uimg" :src="reply.sendUserHead" mode="aspectFit"></image>
									<view class="uname">{{reply.sendUserName}}</view>
								</view>
								<view class="cont" v-if="reply.reply==1">
									<view class="hf">
										回复
									</view>
									<span>{{reply.receiveUserName}}</span>
								</view>
							</view>
							<view class="time">{{reply.createTime}}</view>
						</view>
						<view class="contxt">
							{{reply.content}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		commentOrderList,
		commenttag,
		commentLike,
		productInfo
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				params: {
					pageNum: 1,
					pageSize: 10
				},
				product: {},
				tagList: [], //评价标签
				commentList: [], //评论列表
			};
		},
		onLoad(option) {
			this.params = Object.assign(this.params, uni.getStorageSync('obj'))
			// this.params = JSON.parse(decodeURIComponent(option.obj))
		},
		onShow() {
			this.getinfo()
		},
		onReachBottom() {
			this.params.pageNum++
			commentOrderList(this.params).then(res => {
				res.rows.forEach(item => {
					item.img = item.img?.split(',')
					item.tag = item.tag?.split(',')
				})
				this.commentList.push(...res.rows)
				if(this.commentList.length == res.total){
					uni.showToast({
						title:'已加载全部',
						icon:'none'
					})
				}
			})
		},
		methods: {
			getinfo() {
				productInfo({
					id: this.params.productId
				}).then(res => {
					this.product = res.data.product
				})
				commenttag(this.params).then(res => {
					this.tagList = res.data
				})
				commentOrderList(this.params).then(res => {
					res.rows.forEach(item => {
						item.img = item.img?.split(',')
						item.tag = item.tag?.split(',')
					})
					this.commentList.push(...res.rows)
				})
			},
			//跳转某一条评论
			pagePer(item) {
				console.log(item);
				uni.navigateTo({
					url: `/mainpage/perComment?id=${item.id}`
				})
			},
			goback() {
				uni.navigateBack()
			},
			//change
			change(type){
				this.params.pageNum = 1
				this.params.order = type
				commentOrderList(this.params).then(res => {
					res.rows.forEach(item => {
						item.img = item.img?.split(',')
						item.tag = item.tag?.split(',')
					})
					this.commentList = res.rows
				})
			},
			//点赞
			handleDZ(item){
				item.likeFlag = !item.likeFlag
				commentLike({id:item.id}).then(res=>{
					if(res.code == 200){
						this.params.pageNum = 1
						this.commentList = []
						this.getinfo()
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.top {
		border-bottom: 1px solid #eee;
		width: 750rpx;
		height: 120rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;

		.textrig {
			display: flex;
			font-family: 'DINB';
			font-size: 48rpx;

			.x {
				margin-top: 20rpx;
			}
		}
	}

	.block_1 {
		padding: 20rpx;
		box-sizing: border-box;

		.tipflex {
			display: flex;
			flex-wrap: wrap;

			.ites {
				height: 48rpx;
				background: #036029;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 0rpx 14rpx;
				text-align: center;
				line-height: 48rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				margin: 0rpx 10rpx 20rpx 0rpx;
			}
		}

		.change {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 26rpx auto 0rpx;

			.change_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				display: flex;
				align-items: center;

				.x {
					margin: 0rpx 12rpx;
					width: 2rpx;
					height: 30rpx;
					background-color: #D1CDCD;
				}
			}

			.change_r {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #D1CDCD;
				display: flex;
				align-items: center;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.plist {
		font-family: PingFang SC, PingFang SC;
		padding: 0rpx 20rpx 40rpx 20rpx;
		box-sizing: border-box;

		.ite {
			border-top: 1px solid #eee;
			padding: 30rpx 0rpx;
			.items_user {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.user_flex {
					display: flex;
					align-items: center;

					.uimg {
						width: 50rpx;
						height: 50rpx;
						border-radius: 25rpx;
					}

					.uname {
						font-weight: bold;
						font-size: 32rpx;
						color: #000000;
						margin-left: 10rpx;
					}
				}

				.time {
					font-size: 24rpx;
					color: #979797;
				}
			}

			.star {
				margin: 14rpx auto;
			}

			.text {
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				word-break: break-all;
				margin-bottom: 20rpx;
			}

			.pimglist {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				image {
					width: 230rpx;
					height: 210rpx;
					border-radius: 10rpx;
				}
			}
			.shop {
				height: 68rpx;
				background: #F3F3F3;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				padding: 0rpx 20rpx;
				line-height: 68rpx;
				box-sizing: border-box;
				display: inline-block;

				span {
					font-family: 'DINB';
				}

				.s2 {
					color: #D1CDCD;
					font-size: 22rpx;
					text-decoration-line: line-through;
					margin-left: 6rpx;
				}
			}

			.imgflex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx auto;
				.tipflexs {
					flex: 1;
					display: flex;

					.ites {
						height: 48rpx;
						background: #036029;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						padding: 0rpx 14rpx;
						text-align: center;
						line-height: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-right: 10rpx;
					}
				}

				.img_r {
					display: flex;
					align-items: center;

					.r {
						display: flex;
						margin-left: 20rpx;
						align-items: center;
					}

					span {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #D1CDCD;
					}
				}
			}

			.dialog {
				background: #FAF9F7;
				border-radius:6rpx;
				padding: 22rpx 24rpx;
				.itemss {
					margin-bottom: 24rpx;
					.items_users {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.items_conts {
							display: flex;
							align-items: center;

							.cont {
								display: flex;
								align-items: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #000000;

								.hf {
									color: #CE7034;
									margin: 0 10rpx;
								}
							}
						}

						.user_flexs {
							display: flex;
							align-items: center;

							.uimg {
								width: 40rpx;
								height: 40rpx;
								border-radius: 25rpx;
							}

							.uname {
								font-size: 28rpx;
								color: #000000;
								margin-left: 10rpx;
							}
						}

						.time {
							font-size: 24rpx;
							color: #979797;
						}
					}

					.contxt {
						margin-top: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.items:last-child {
					margin-bottom: 0rpx;
				}

			}
		}
	}
</style>